<style scoped>
  .layout {
    border: 1px solid #d7dde4;
    background: #f5f7f9;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
  }

  .layout-header-bar {
    background: #fff;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  }

  .user-dropdown-menu-con {
    position: absolute;
    right: 0;
    top: 0;
    width: 150px;
    /*height: 100%;*/
  }

  .user-dropdown-menu-con .main-user-name {
    display: inline-block;
    width: 80px;
    word-break: keep-all;
    white-space: nowrap;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: right;
  }

  .user-dropdown-innercon {
    height: 100%;
    padding-right: 14px;
  }

</style>

<template>
  <div class="layout">
    <mmenu></mmenu>
    <Layout :style="{marginLeft: '200px'}">
      <Header
        :style="{background: '#fff', padding: '0px 23px', boxShadow: '0 2px 3px 2px rgba(0,0,0,.1)', height: '55px', lineHeight: '55px'}">
        <div class="user-dropdown-menu-con">
          <Row type="flex" justify="end" align="middle" class="user-dropdown-innercon">
            <Dropdown transfer trigger="click" @on-click="handleClickUserDropdown">
              <a href="javascript:void(0)">
                <span class="main-user-name">{{ userName }}</span>
                <Icon type="arrow-down-b"></Icon>
              </a>
              <DropdownMenu slot="list">
                <DropdownItem name="ownSpace">个人中心</DropdownItem>
                <DropdownItem name="logout" divided>退出登录</DropdownItem>
              </DropdownMenu>
            </Dropdown>
            <Avatar icon="person" :src="avatorPath" style="background: #619fe7;margin-left: 10px;"></Avatar>
          </Row>
        </div>
      </Header>
      <Content :style="{padding: '10px 5px', minHeight: '800px'}">
        <div>
          <router-view></router-view>
        </div>
      </Content>
    </Layout>
  </div>
</template>

<script>
  import mmenu from "@/components/mmenu";
  import Cookies from 'js-cookie';

  export default {
    name: "Admin",
    components: {
      mmenu
    },
    data() {
      return {
        userName: 'Admin',
        avatorPath: ''
      };
    },
    methods: {
      handleClickUserDropdown(name) {
        if (name === "ownSpace") {
          this.$router.push({
            // name: 'Own'
            path: "/admin/own"
          });
        } else if (name === "logout") {
          // 退出登录
          // this.$store.commit('logout', this);
          // this.$store.commit('clearOpenedSubmenu');

          this.delAllCookie();
          this.$router.push({
            name: "AdminLogin"
          });
        }
      },
      delAllCookie() {
        let myDate = new Date();
        myDate.setTime(-1000);//设置时间
        let data = document.cookie;
        let dataArray = data.split("; ");
        for (let i = 0; i < dataArray.length; i++) {
          let varName = dataArray[i].split("=");
          document.cookie = varName[0] + "=''; expires=" + myDate.toGMTString();
        }

      }
    },
    mounted() {
      const user = JSON.parse(Cookies.get('user'));
      this.userName = user.userName;
    }
  };
</script>
